<template>
    <div class="nav">
        <div class="header w">
            <ul class="left">
                <li v-for="(item, index) in listLeft" @click="loginAndRegister(item.title)">
                    <span>{{item.title}}</span>
                    <i v-if="index != listLeft.length - 1">|</i>
                </li>
            </ul>
            <ul class="right">
                <li v-for="(item, index) in listRight">
                    <span>
                        <img v-if="item.isIcon" src="../assets/icon/collection.png" alt="">
                        &nbsp;{{item.title}}
                    </span>
                    <i v-if="index != listRight.length - 1">|</i>
                </li>
            </ul>
        </div>
    </div>

</template>

<script>
    export default {
        name: "Header",
        data() {
            return {
                listLeft: [{
                    isIcon: false,
                    title: "登录",
                }, {
                    isIcon: false,
                    title: "商家注册",
                },],
                listRight: [{
                    isIcon: false,
                    title: "邀请有奖",
                }, {
                    isIcon: true,
                    title: "收藏我们",
                    iconSrc: "../assets/icon/collection.png"
                }, {
                    isIcon: false,
                    title: "帮助中心",
                }, {
                    isIcon: false,
                    title: "网站导航",
                },]

            }
        },
        methods: {
          loginAndRegister(title) {
            if (title == "登录" || title == "商家注册") {
              let base = window.location.href
              window.location.href = `${ base.split('/#/').join("") }/shop/#/${title == "登录" ? "login" : "reg"}`
            } else {
              return
            }
          }
        }
    }
</script>

<style scoped lang="less">
    .nav {
        width: 100%;
        font-size: 12px;
        background-color: #F7F7F7;
        border-bottom: 1px solid #dfdfdf;
        color: #999;

        .header {
            margin: 0 auto;
            height: 40px;
            display: flex;
            justify-content: space-between;

            .left, .right {
                li {
                    float: left;

                    span {
                        display: inline-block;
                        padding: 12px 18px;
                        cursor: pointer;
                        vertical-align: middle;

                        &:hover {
                            color: hotpink;
                        }
                    }
                }
            }

            .right {
                li {
                    float: left;

                    img {
                        width: 12px;
                        height: 12px;
                    }

                    span {
                        img {
                            position: relative;
                            left: 0px;
                            top: -2px;
                        }

                        &:hover {
                            color: deeppink;
                        }
                    }
                }
            }
        }
    }

    @media screen and (max-width: 1114px) {
        .header {
            width: 100%;
        }
    }
</style>
